<template>
	<view class="demo3">
		<view class="top">
			<view>
				<uni-row>
					<uni-col :span="20">
						<view class="time">{{ currentTime }}</view>
					</uni-col>
					<uni-col :span="4">
						<view class="wifi">
							<image src="../../static/wifi.png" mode=""></image>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="tcen">
				<uni-row>
					<uni-col :span="9" :offset="10">
						<text class="tcentext">招生宣传</text>
					</uni-col>
					<uni-col :span="5">
						<view class="tcenview" @click="toindex">
							<uni-row>
								<uni-col :span="8" :offset="4">
									<image class="dian" src="../../static/dian.png" mode=""></image>
								</uni-col>
								<uni-col :span="4">
									<view class="shu"></view>
								</uni-col>
								<uni-col :span="8">
									<view class="quan">
										<view class="big">
											<view class="small">

											</view>
										</view>
									</view>

								</uni-col>
							</uni-row>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="tfot">

				<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入活动名称模糊查询" clearButton="none"
					cancelButton="none" @confirm="search" />
				<web-view v-if="searchUrl" :src="searchUrl" @click="backToApp"></web-view>
			</view>


		</view>
		<view class="center">
			<view class="cent">
				<uni-row>
					<uni-col :span="6">
						<view @click="toApply">
							<text class="centrighttext">招宣活动

							</text>

						</view>
					</uni-col>
					<uni-col :span="6">
						<view>
							<text class="centlefttext">母校行
								<view class="centleft">

								</view>
							</text>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="cenc">
				<uni-row>
					<uni-col :span="2">
						<image class="xiaohui" src="../../static/xiaohui.png">

						</image>
					</uni-col>
					<uni-col :span="16">
						<text class="cenctext1l">武汉第一中学</text>
					</uni-col>
					<uni-col :span="1">
						<image class="cencdian" src="../../static/cdian.png">

						</image>
					</uni-col>
					<uni-col :span="5">
						<text class="cenctext1r">开放报名中</text>
					</uni-col>
				</uni-row>
				<view class="cenctext2">
					<view><text>计划开始日期：2023/03/29</text></view>
					<view><text>计划结束日期：2023/03/29</text></view>
					<view><text>活动区域：湖北省武汉市洪山区</text></view>

				</view>
				<view class="cenchr">

				</view>
				<uni-row>
					<uni-col :span="10">
						<view class="cencfotimg">
							<view class="cencfotimg1">
								<image class="cencfotimgv" src="../../static/xz1.jpg" mode=""></image>
							</view>
							<view class="cencfotimg2">
								<image class="cencfotimgv" src="../../static/xz2.jpg" mode=""></image>
							</view>
							<view class="cencfotimg3">
								<image class="cencfotimgv" src="../../static/xz3.jpg" mode=""></image>
							</view>
							<view class="cencfotimg4">
								<image class="cencfotimgv" src="../../static/xz4.jpg" mode=""></image>
							</view>
							<view class="cencfotimg5">
								<image class="cencfotimgv" src="../../static/xz5.jpg" mode=""></image>
							</view>
						</view>
					</uni-col>
					<uni-col :span="14">
						<text class="cencfottext">28人已经参与活动，赶紧报名吧！</text>
					</uni-col>
				</uni-row>

			</view>
			<view class="cenc">
				<uni-row>
					<uni-col :span="2">
						<image class="xiaohui" src="../../static/xiaohui.png">

						</image>
					</uni-col>
					<uni-col :span="16">
						<text class="cenctext1l">武汉第一中学</text>
					</uni-col>
					<uni-col :span="1">
						<image class="cencdian" src="../../static/cdian.png">

						</image>
					</uni-col>
					<uni-col :span="5">
						<text class="cenctext1r">开放报名中</text>
					</uni-col>
				</uni-row>
				<view class="cenctext2">
					<view><text>计划开始日期：2023/03/29</text></view>
					<view><text>计划结束日期：2023/03/29</text></view>
					<view><text>活动区域：湖北省武汉市洪山区</text></view>


				</view>
				<view class="cenchr">

				</view>
				<uni-row>
					<uni-col :span="10">
						<view class="cencfotimg">
							<view class="cencfotimg1">
								<image class="cencfotimgv" src="../../static/xz1.jpg" mode=""></image>
							</view>
							<view class="cencfotimg2">
								<image class="cencfotimgv" src="../../static/xz2.jpg" mode=""></image>
							</view>
							<view class="cencfotimg3">
								<image class="cencfotimgv" src="../../static/xz3.jpg" mode=""></image>
							</view>
							<view class="cencfotimg4">
								<image class="cencfotimgv" src="../../static/xz4.jpg" mode=""></image>
							</view>
							<view class="cencfotimg5">
								<image class="cencfotimgv" src="../../static/xz5.jpg" mode=""></image>
							</view>
						</view>
					</uni-col>
					<uni-col :span="14">
						<text class="cencfottext">28人已经参与活动，赶紧报名吧！</text>
					</uni-col>
				</uni-row>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	let toApply = function() {
		uni.switchTab({
			url: '/pages/student/student'
		})
	}
	let toindex = function() {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	let currentTime = ref('');

	function updateTime() {
		let date = new Date();
		let hours = date.getHours().toString().padStart(2, '0');
		let minutes = date.getMinutes().toString().padStart(2, '0');
		currentTime.value = `${hours}:${minutes}`;
	}
	// 初始化时更新时间，并且每分钟更新一次
	onMounted(() => {
		updateTime();
		setInterval(updateTime, 60000); // 设置定时器，每分钟更新一次时间
	});
	let searchUrl = ref('');
	let timer = null;
	let search = (e) => {
		// 获取输入框的值
		let keyword = e.value;
		// 构建百度搜索的URL
		searchUrl.value = `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`;
		timer = setTimeout(() => {
			backToApp();
		}, 10000);
	}
	let backToApp = () => {
		// 清空searchUrl，从而隐藏web-view
		searchUrl.value = '';
		clearTimeout(timer);
	}
</script>

<style scoped>
	.demo3 {
		width: 100%;
		background-color: #276EFFFF;
	}

	.top {
		height: 224px;
		padding: 16px;
		background-image: url(../../static/bg1.png);
		background-size: cover;
	}

	.time {
		width: 28.43px;
		height: 11.09px;
		color: #FFFFFF;
	}

	.wifi image {
		width: 66px;
		height: 12px;
	}

	.tcen {
		padding-top: 17px;
	}

	.tcentext {
		font-weight: 500;
		font-size: 18px;
		color: #FFFFFF;
	}

	.tcenview {
		width: 87px;
		height: 32px;
		background: #ffffff99;
		border: 0 solid #97979733;
		border-radius: 25px;

	}

	.quan {
		width: 23px;
		height: 32px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dian {
		width: 22px;
		height: 10px;
	}

	.big {
		width: 17px;
		height: 17px;
		border-radius: 50%;
		border: 2px #FFFFFF solid;

		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.small {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: #FFFFFF;

	}

	.shu {
		width: 0.5px;
		height: 18.5px;
		background: #00000033;
		margin-top: 6px;
	}

	.tfot {
		margin: 40px 10px;
		height: 36px;

	}

	.tfottext {
		font-weight: 400;
		font-size: 16px;
		color: #707070;
		letter-spacing: 0;
		line-height: 17px;
	}

	.tfotimg {
		width: 22px;
		height: 22px;

	}

	.center {

		height: 611px;
		background: #F1F4FC;
		border-radius: 12px;
		padding: 10px;
	}

	.centleft {
		width: 48px;
		height: 4px;
		background-image: linear-gradient(to right, #fff, #276EFFFF);

	}

	.centlefttext {
		font-weight: 500;
		font-size: 16px;
		color: #000000;
		letter-spacing: 0;
	}

	.centrighttext {
		font-weight: 400;
		font-size: 16px;
		color: #5E5E5E;
		letter-spacing: 0;
	}

	.cenc {
		margin: 16px 0px;
		padding: 16px;

		height: 170px;
		background: #FFFFFF;
		box-shadow: 0 3px 6px 0 #c9cfd980;
		border-radius: 8px;
	}

	.xiaohui {
		width: 24px;
		height: 24px;
	}

	.cenctext1l {
		font-weight: 500;
		font-size: 16px;
		color: #000000;
		letter-spacing: 0;
	}

	.cenctext1r {
		font-weight: 400;
		font-size: 12px;
		color: #276EFF;
		letter-spacing: 0;
		line-height: 20px;
	}

	.cencdian {
		width: 8px;
		height: 8px;
	}

	.cenctext2 {
		margin-top: 6px;

		height: 70px;

		font-weight: 400;
		font-size: 12px;
		color: #5D5C5C;
		letter-spacing: 0;
		line-height: 20px;
		white-space: normal;
		word-wrap: break-word;
	}

	.cenchr {
		margin-bottom: 14px;
		margin-top: 10px;
		height: 1px;
		opacity: 0.24;
		background-color: #979797;
	}

	.cencfottext {
		font-weight: 400;
		font-size: 12px;
		color: #5D5C5C;
		letter-spacing: 0;
		line-height: 20px;
	}

	.cencfotimg {
		display: flex;
		/* 启用 Flexbox 布局 */
		height: 34px;
		/* 容器高度 */
		justify-content: left;
		/* 水平居中 */
		align-items: flex-start;
		/* 垂直排列 */

	}

	.cencfotimg1 {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 2px solid #FFFFFF;

		z-index: 0;
	}

	.cencfotimg2 {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		align-self: flex-start;
		margin-left: -19px;
		z-index: 1;
	}

	.cencfotimg3 {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		margin-left: -19px;
		z-index: 2;
	}

	.cencfotimg4 {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		margin-left: -10px;
		z-index: 3;
	}

	.cencfotimg5 {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		margin-left: -19px;
		z-index: 4;
	}

	.cencfotimgv {
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}
</style>